<!-- 标题组件 -->
<template>
    <div id='title_container'>
        {{ title }}
    </div>
</template>
<script setup>
import { defineProps, watch, ref } from 'vue';
import { useCommonState } from "../store/commonState"

// 实例化Pinia自定义sotore
const commonStore = useCommonState()

// 监听切换导航，动态修改标题文本
watch(() => commonStore.selectedNav,
    (newValue, oldValue) => {
        if (newValue == "chat") {
            title.value = "首页"
        } else {
            title.value = "联系"
        }
    }
)

// 声明标题
let title = ref("首页")

</script>
<style scoped>
body,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#title_container {
    max-width: 700px;
    font-size: 17px;
    box-sizing: border-box;
    background-color: #eeeeee;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-content: center;
}
</style>